<template>
	<view @sw="swiperight">
		<uni-transition :mode-class="['fade']" :show="show" :durations="duration">
			<view class="tanchuang">
				<view class="content">
					<view class="avatar"></view>
					<view class="right">我可以为您介绍本厂房的详细情况和购厂流程， 希望与您电话沟通一下</view>
				</view>
				<view class="button">
					<view class="left" @click="quxiao">暂不</view>
					<view class="right" @click="makePhone">同意</view>
				</view>
			</view>
		</uni-transition>
		<view v-show="!is_open">

			<view class="page-section-spacing">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" @change="change"
				 :duration="duration">
					<swiper-item v-for="(item,index) in detail.slider" :key="index" @click="prewViewImage()">
						<image class="item" :src="item">
					</swiper-item>
				</swiper>
				<button hover-class='none' class="iconfont icon-fenxiang_2 fudong" open-type="share"></button>
				<view class="renzheng" v-if="detail.renzheng">
				</view>
				<view class="dot">
					<view class="iconfont icon-tupian font-size"></view>
					<view class="jianju"></view>
					<view>{{current}}/{{count}}</view>
				</view>
			</view>

			<image v-if="!login" class="chaxun" src="https://pic.fhshidai.com/filechaxun.png" @click="chaxun"></image>
			<view v-if="login&&detail.chajia>0" class="shengqian">
				{{detail.chajia}}
			</view>
			<view class="content">
				<view class="base">
					<view class="title" v-text="detail.title">

					</view>
					<view class="tag">
						<view class="tag-item" v-for="(tag,index) in detail.tags" :key="index" v-text="tag.name"></view>
					</view>
					<view class="shuxing">
						<view class="shuxing-item">
							<view class="price" v-if="detail.price">{{detail.price}}元/m²</view>
							<view class="price" v-else>面议</view>
							<view class="item-danwei">售价</view>
						</view>
						<view class="shuxian"></view>
						<view class="shuxing-item">
							<view class="bold">{{detail.wuye}}</view>
							<view class="item-danwei">物业类型</view>
						</view>
						<view class="shuxian"></view>
						<view class="shuxing-item">
							<view class="bold">{{detail.build_area}}</view>
							<view class="item-danwei">建筑面积(m²)</view>
						</view>
					</view>
				</view>


				<view class="kanchang">
					<view class="kanchang-item kanchang1" @click="vr">
						<view class="iconfont icon-a size"></view>
						<view class="kongge"></view>
						<view class="kanfang-item-title">VR看厂</view>

					</view>

					<view class="kanchang-item kanchang2" @click="open">
						<view class="iconfont icon-bofang size-small"></view>
						<view class="kongge"></view>

						<view class="kanfang-item-title">视频看厂</view>


					</view>

				</view>
				<video id="myVideo" @fullscreenchange="fullscreenchange" class="video" :src="detail.video">

				</video>

				<!-- 厂房信息 -->
				<view class="card">
					<view class="card-title">厂房信息</view>
					<view class="card-info">
						<view class="xinxi">
							<view class="left">
								<view class="block">
									<view class="block-left">厂房地址</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.region}}</view>
								</view>
								<view class="block">
									<view class="block-left">厂房面积</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.factory_area}}m²</view>
								</view>
								<view class="block">
									<view class="block-left">建筑面积</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.build_area}}m²</view>
								</view>
								<view class="block">
									<view class="block-left">厂房楼层</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.factory_floor}}层</view>
								</view>
								<view class="block">
									<view class="block-left">首层层高</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.hight}}米</view>
								</view>
							</view>
							<view class="right">
								<view class="block">
									<view class="block-left">厂房编号</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.code}}</view>
								</view>
								<view class="block">
									<view class="block-left">电梯</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.lift}}T</view>
								</view>
								<view class="block">
									<view class="block-left">配电</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.power}}KV</view>
								</view>
								<view class="block">
									<view class="block-left">适合行业</view>
									<view class="shuge"></view>
									<view class="block-right"> <text v-for="(hangye,index) in detail.hangye" :key="index">{{hangye.name}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 厂房描述 -->

				<view class="card3">

					<view class="card-info">
						<jyf-parser :lazy-load="lazy" :cache="cache" :html="content" ref="article"></jyf-parser>
					</view>
				</view>

				<!-- 所属园区-->
				<view class="card">
					<view class="card-title">
						<view>
							所属园区
						</view>
						<view class="card-right" @click="park">
							进去园区 <view class="iconfont icon-qianjin icon-small"></view>
						</view>
					</view>
					<view class="card-info">
						<image :src="detail.park_image" class="park"></image>
						<view class="xinxi">
							<view class="left">
								<view class="block">
									<view class="block-left">园区名称</view>
									<view class="shuge"></view>
									<view class="block-right black">{{detail.park_name}}</view>
								</view>
								<view class="block">
									<view class="block-left">建筑面积</view>
									<view class="shuge"></view>
									<view class="block-right black">{{detail.park_area}}方</view>
								</view>
								<view class="block">
									<view class="block-left">园区类型</view>
									<view class="shuge"></view>
									<view class="block-right black">{{detail.park_type}}</view>
								</view>
							</view>
							<view class="right">
								<view class="block">
									<view class="block-left">园区业态</view>
									<view class="shuge"></view>
									<view class="block-right black">{{detail.park_obj}}</view>
								</view>
								<view class="block">
									<view class="block-left">区域</view>
									<view class="shuge"></view>
									<view class="block-right">{{detail.park_region}}</view>
								</view>
							</view>
						</view>
						<view @click="park" class="red-button">
							<view>该园区共{{detail.park_count}}套厂房在售中</view>
							<view class="iconfont icon-qianjin icon-small1"></view>
						</view>
					</view>
				</view>
				<!-- 选址顾问	 -->
				<view class="card">
					<view class="card-avatar">
						<view class="card-view">
							<image src="https://pic.fhshidai.com/fileavatar.png" class="avatar"></image>
							<view class="shuge-29"></view>
							<view class="card-text">
								<view class="card-text-top">选址顾问</view>
								<view class="card-text-bottom">为您解疑答惑</view>
							</view>
						</view>
					</view>
					<view class="card-info">
						<view class="guwen">
							<view class="guwen-item" v-for="(item,index) in guwen_list" :key="index">
								{{item}}
							</view>
						</view>
						<navigator url="/pages/zhaochangfang/zhaochangfang" class="red-button">
							<view>咨询问题</view>
							<view class="iconfont icon-qianjin icon-small1"></view>
						</navigator>
					</view>
				</view>
				<!-- 购房流程 -->
<!--				<image src="http://pic.qalex.com/file/XfDnQYNtKki746SgAgl3HAFFIdbJDe8SCIIkoki2.png" class="goufang"></image>-->

				<!-- 猜你喜欢 -->
				<view class="card3">
					<view class="card-title">
						<view>
							猜你喜欢
						</view>
						<navigator url="/pages/list/list" open-type="switchTab" class="card-right">
							查看更多 <view class="iconfont icon-qianjin icon-small"></view>
						</navigator>
					</view>
					<view class="card-info1">
						<uni-item :item="item" rediret="true" v-for="(item,index) in likeList" :key="index"></uni-item>
					</view>
				</view>
			</view>

		</view>
		<view class="top"></view>
		<view class="detail-footer">
			<view class="shoucang" @click="shoucang">
				<view :class="['iconfont',  {'icon-shoucang':is_like==0},{'icon-shoucang1':is_like==1}, {'icon-grey':is_like==0},{'icon-red':is_like==1}]"></view>
				<view class="title" v-if="is_like">已收藏</view>
				<view class="title" v-if="!is_like">收藏</view>
			</view>
			<view class="shuxian">
			</view>
			<view class="user_info">
				<view>
					<image class="avatar" src="https://pic.fhshidai.com/fileavatar.png"></image>
				</view>
				<view class="info">
					<view class="name">{{detail.owner_name}}</view>
					<view class="desc">业主</view>
				</view>

			</view>
	<!-- 		<button class="kehu-button" open-type="contact">
				<view class="iconfont icon-icon--"></view>
				<view>在线问</view>
			</button> -->
			<view class="shuge"></view>
			<button class="mobile-button" @tap="makePhone">
				<view class="iconfont icon-dianhua1"></view>
				<view>打电话</view>
			</button>
		</view>



	</view>
	<!-- <view v-show="is_open"> -->
	<!-- 	</view> -->
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import jyfParser from "@/components/jyf-parser/jyf-parser";

	export default {
		components: {
			jyfParser
		},


		onShareAppMessage() {
			return {
				title: this.detail.title,
				path: '/pages/list/detail/detail?id=' + this.id,
				desc: '',
				controls: true,
				imageUrl: this.detail.slider[0]
			}
		},
		onReady: function(res) {

			// #ifdef MP-TOUTIAO
			this.videoContext = tt.createVideoContext('myVideo')
			// #endif
			// #ifndef MP-TOUTIAO
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
			console.log(this.videoContext)
			// #ifdef MP-TOUTIAO
			//	this.videoContext.requestFullScreen()
			console.log('全屏')
			console.log(this.videoContext)
			// #endif
		},
		data() {
			return {
				id: '',
				is_open: false,
				videoContext: '',
				//轮播图
				lazy: true,
				cache: true,
				show: false,
				login: false,
				durations: 2000,
				detail: {
					title: '',
					tags: [],
					id: '',
					price: '',
					wuye: '',
					build_area: '',
					video: '',
					address: '',
					code: '',
					factory_area: '',
					lift: '',
					power: '',

				},
				content: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 10000,
				duration: 500,
				slider: [

				],
				current: 1,
				count: 0,
				guwen_list: [
					'房源真实吗',
					'首付几成',
					'是否有其他费用',
					'周边配套如何',
					'交易注意事项',
					'是否可个人购买',
				],
				likeList: [],
				is_like: 0

			}
		},
		onLoad: function(option) {
			setTimeout(() => {
				this.show = true
			}, 5000)
			console.log(option)
			let token = uni.getStorageSync('token')
			// #ifdef MP-TOUTIAO

			/* 	if (!token) {
					uni.reLaunch({
						url: "/pages/login/login"
					})
				} */
			// #endif
			if (token) {
				this.login = true
			}
			this.id = option.id
			if (this.$store.state.Detail.list[option.id]) {
				this.detail = this.$store.state.Detail.list[option.id]
				uni.setNavigationBarTitle({
					title: this.detail.title
				})
				this.count = this.detail.slider.length
				this.content = this.detail.describe
			} else {
				this.$api.getFactoryDetail({
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.count = this.detail.slider.length
					this.content = res.data.describe
					uni.setNavigationBarTitle({
						title: this.detail.title
					})
					this.pushDetail(res.data)

				})
			}

			this.getFactorysLike()
		},
		onShow() {
			this.$api.isLikeFactory({
				'model_id': this.id,
				'type_id': 0,
				'source_type': 0
			}).then(res => {
				this.is_like = res.data
			})
		},
		methods: {
			...mapMutations({
				pushDetail: 'Detail/pushDetail'
			}),
			chaxun() {
				uni.switchTab({
					url: '/pages/user/user'
				})


			},
			swiperight() {
				uni.navigateBack({

				})
			},
			change(event) {
				this.current = event.detail.current + 1
			},
			open() {
				/* 			uni.navigateTo({
								url:"/pages/list/detail/video"
							}) */
				//	this.is_open = true

				console.log(this.videoContext)
				this.videoContext.requestFullScreen();
				this.videoContext.play()
			},
			park() {
				getApp().globalData.is_park = this.detail.park_id
				getApp().globalData.park_name = this.detail.park_name
				uni.switchTab({
					url: '/pages/list/list',

				})
			},
			shoucang() {
				this.$api.likeFactory({
					model_id: this.id
				}).then(
					this.is_like = 1 - this.is_like
				)
			},
			fullscreenchange(event) {
				console.log(event)

				if (event.detail.fullScreen == false) {
					this.is_open = false
					this.videoContext.pause()

				}
			},
			quxiao() {
				this.show = false
			},
			prewViewImage() {
				uni.previewImage({
					count: this.current,
					urls: this.detail.slider.map((item,index)=>{
						return item.substring(0, item.indexOf('?'))
					}),
					loop: true,
					current: this.current-1
				})
			},
			vr() {
				console.log(111)
				uni.navigateTo({
					url: "/pages/webview/webview?id=" + this.id
				})
			},
			makePhone: function() {
				this.show = false
				//#ifdef MP-TOUTIAO

				console.log(7)
				tt.makePhoneCall({
					phoneNumber: this.detail.owner_tel,
					success: (res) => {
						this.$toutiao(7)
						console.log(`makePhoneCall调用成功${res}`);
					},
					fail(res) {
						console.log(res);
					},
				})
				//#endif
				//#ifndef MP-TOUTIAO



				uni.makePhoneCall({
					phoneNumber: this.detail.owner_tel.toString(),
					success(res) {
						console.log(`makePhoneCall调用成功${res}`);
					},
					fail(res) {
						console.log(res);
					}
				})
				//#endif
			},

			getFactorysLike() {
				this.$api.getFactorysLike({
					id: this.id
				}).then(res => {
					this.likeList = res.data
				})
			}
		}
	}
</script>
<style>
	@import url("@/components/u-parse/u-parse.css");

	page {
		/* background-color: #f7f7f7; */
	}

	button {
		background-color: rgba(255, 255, 255, 0.01);
		border: none;
	}

	button::after {
		border: none;
	}

	button::after {
		border: none;
	}
</style>
<style scoped lang="scss">
	.cpt-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		z-index: 99;
	}

	.tanchuang {
		width: 750rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		position: fixed;
		top: 0;
		z-index: 10000;
		background: rgba(255, 255, 255, 1);

		.content {
			height: 128rpx;
			display: flex;
			justify-content: space-between;
			padding-left: 34rpx;
			padding-right: 60rpx;
			border-bottom: 2rpx solid #F7F7F7;

			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background: url(https://pic.fhshidai.com/filelp3ifywt0fyHo7r9KFK18WNHhiepO4NsQJpv3v2S.png);
				background-size: 64rpx 64rpx;
			}

			.right {
				width: 569rpx;
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: rgba(49, 49, 49, 1);
				line-height: 36rpx;
			}

		}

		.button {

			display: flex;
			height: 68rpx;
			box-shadow: 5rpx 5rpx 5rpx #e4e4e7;
			;

			.left {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: rgba(154, 155, 160, 1);
				width: 50%;
				border-right: 2rpx solid #F7F7F7;
				;

			}

			.right {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #DA3337;
				width: 50%;
			}
		}
	}

	.swiper {
		width: 100%;
		height: 435rpx;
	}

	.icon-small {
		font-size: 16rpx;
	}

	.icon-grey {
		color: #9A9BA0;
	}

	.detail-footer {
		width: 750rpx;
		height: 120rpx;
		padding-top: 37rpx;
		padding-bottom: 25rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		z-index: 10001;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;

		.shoucang {
			width: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.title {
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: rgba(154, 155, 160, 1);

				font-size: 22rpx;
			}

		}

		.shuxian {
			width: 1rpx;
			height: 40rpx;
			background-color: #9A9BA0;
		}

		.user_info {
			width: 223rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.info {
				display: flex;
				flex-direction: column;

				justify-content: space-between;

				.name {
					color: #313131;
					font-size: 28rpx;
					font-weight: bold;
				}

				.desc {
					color: #9A9BA0;
					font-size: 22rpx;
				}
			}
		}


	}

	.shuge-29 {
		height: 29rpx;
	}

	/deep/ #xgplayer-start {
		width: 50px
	}

	.video {
		width: 327rpx;
		height: 220rpx;
		border-radius: 10rpx;
		z-index: 1;
		position: absolute;
		top: -1000rpx;
		left: 0;

	}

	.guwen {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.guwen-item {
			width: 197rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(247, 247, 247, 1);
			border-radius: 4rpx;
			font-size: 24rpx;
			margin-bottom: 20rpx;
			font-weight: 400;
			color: rgba(67, 68, 70, 1);
		}
	}

	.icon-small1 {
		font-size: 18rpx;
		line-height: 20rpx;
	}

	.top {
		height: 220rpx;
	}

	.red-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(218, 51, 55, 1);
		border-radius: 35rpx;
		width: 100%;
		height: 70rpx;
		color: #FFFFFF;
		margin-top: 43rpx;
		font-size: 28rpx;
	}

	.block {
		display: flex;
		justify-content: space-between;

		.block-left {
			font-size: 28rpx;
			color: #9A9BA0;
			line-height: 56rpx;
			width: 121rpx;
		}

		.block-right {
			font-size: 28rpx;
			color: #313131;
			overflow: hidden;
			width: 170rpx;
			white-space: nowrap;
			line-height: 56rpx;
			text-overflow: ellipsis;
		}

		.black {
			color: #313131;
		}
	}

	.kongge {
		height: 28rpx;
	}

	.shuge {
		width: 17rpx;
	}

	.shuge-29 {
		width: 29rpx;
	}

	.item {
		width: 100%;
		height: 434rpx;
	}

	.chaxun {
		width: 100%;
		height: 80rpx;
	}

	.shengqian {
		background: url(https://pic.fhshidai.com/filefKU8tLOTdRvYXAMdnEvvzq7OQzqPSEacuyIhDlCE.jpeg) no-repeat;
		background-size: 100% 80rpx;
		width: 100%;
		height: 80rpx;
		padding-left: 450rpx;
		font-size: 48rpx;
		font-weight: 600;
		color: #FFFFFF;
		display: flex;
		line-height: 60rpx;
		align-items: center;

	}

	.page-section-spacing {
		position: relative;
	}

	.fudong {
		position: absolute;
		top: 2rpx;
		right: 2rpx;
		color: #FFFFFF;
		font-size: 46rpx;
	}

	.kehu-button {
		width: 190rpx;
		height: 70rpx;
		background: rgba(49, 49, 49, 1);
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;

	}
	//#ifdef MP-BAIDU
	.mobile-button {

		height: 70rpx;
		background: #DA3337;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;

	}
	//#endif
	//#ifndef MP-BAIDU
	.mobile-button {
		width: 190rpx;
		height: 70rpx;
		background: #DA3337;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;

	}
	//#endif



	.font-size {
		font-size: 24rpx;
	}

	.jianju {
		width: 8rpx;
	}

	.renzheng {
		position: absolute;
		top: 0rpx;
		left: 44rpx;
		width: 175rpx;
		height: 53rpx;

		background: url(https://pic.fhshidai.com/fileuUMv92AV0tnBH6L5enyLh8ZtqhSIBwwSxKEgjpEY.png);
		background-size: 175rpx 53rpx;
	}

	.avatar {
		height: 78rpx;
		width: 78rpx;
		background-color: #F3F3F3;
		text-align: center;
		border-radius: 50%;
	}

	.dot {
		width: 97rpx;
		height: 41rpx;
		background: rgba(0, 0, 0, 1);
		opacity: 0.6;
		border-radius: 4px;
		position: absolute;
		bottom: 32rpx;
		right: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 41rpx;
	}

	.content {
		padding-left: 32rpx;
		padding-right: 32rpx;
		margin-top: 32rpx;

		.goufang {
			margin-bottom: 35rpx;
			height: 845rpx;
			width: 100%;
		}

		.card {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 35rpx;

			.card-avatar {
				height: 136rpx;
				border-bottom: 2rpx solid #F3F3F3;
				display: flex;
				justify-content: space-between;
				padding-left: 25rpx;
				padding-top: 41rpx;

				.card-view {
					width: 259rpx;
					height: 78rpx;
					display: flex;

					.card-text {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.card-text-top {
							font-size: 34rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 1);
						}

						.card-text-bottom {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(67, 68, 70, 1);
						}
					}
				}
			}

			.card-title {

				height: 89rpx;
				border-bottom: 2rpx solid #F3F3F3;
				color: #313131;
				font-size: 34rpx;
				font-weight: bold;
				padding: 25rpx;
				display: flex;
				justify-content: space-between;

				.card-right {
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: rgba(73, 73, 73, 1);
					display: flex;
					line-height: 60rpx;
				}
			}

			.card-info1 {
				background: #F3F3F3;
				padding-bottom: 43rpx;
			}

			.card-info {
				padding-top: 30rpx;
				padding-left: 25rpx;
				padding-right: 17rpx;
				padding-bottom: 43rpx;

				.park {
					height: 349rpx;
					width: 100%;
					border-radius: 10rpx;
					margin-bottom: 33rpx;
				}

				.xinxi {
					display: flex;
					justify-content: center;

					.left {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
					}

					.right {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
					}

				}
			}

		}

		.card3 {

			border-radius: 10rpx;


			.card-avatar {
				height: 136rpx;
				border-bottom: 2rpx solid #F3F3F3;
				display: flex;
				justify-content: space-between;
				padding-left: 25rpx;
				padding-top: 41rpx;

				.card-view {
					width: 259rpx;
					height: 78rpx;
					display: flex;

					.card-text {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.card-text-top {
							font-size: 34rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 1);
						}

						.card-text-bottom {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(67, 68, 70, 1);
						}
					}
				}
			}

			.card-title {

				height: 89rpx;
				border-bottom: 2rpx solid #F3F3F3;
				color: #313131;
				font-size: 34rpx;
				font-weight: bold;
				padding: 25rpx;
				display: flex;
				justify-content: space-between;

				.card-right {
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: rgba(73, 73, 73, 1);
					display: flex;
					line-height: 60rpx;
				}
			}

			.card-info1 {
				background: #F3F3F3;
				padding-bottom: 43rpx;
			}

			.card-info {
				padding-top: 30rpx;

				.park {
					height: 349rpx;
					width: 100%;
					border-radius: 10rpx;
					margin-bottom: 33rpx;
				}

				.xinxi {
					display: flex;
					justify-content: center;

					.left {
						width: 60%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
					}

					.right {
						width: 40%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
					}

				}
			}

		}

		.base {
			width: 100%;

			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding-left: 25rpx;
			padding-right: 32rpx;
			padding-top: 41rpx;
			padding-bottom: 41rpx;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 40rpx;
				color: #313131;
			}

			.tag {
				height: 100rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.tag-item {
					margin-right: 12rpx;
					width: 110rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
					background-color: #ECF1F4;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
					color: #476987;
					border-radius: 4rpx;
				}
			}

			.shuxing {

				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				.shuxian {
					width: 1rpx;
					height: 69rpx;
					background-color: #DFDFE1;
				}

				.shuxing-item {
					font-size: 34rpx;
					color: #000000;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					height: 90rpx;

					.bold {
						font-weight: bold;
					}

					.price {
						font-weight: bold;
						color: #C31B1F;
					}

					.item-danwei {

						color: #9A9BA0;
						font-size: 24rpx;
					}
				}
			}

		}

		.kanchang {
			margin-top: 32rpx;
			margin-bottom: 32rpx;
			width: 100%;
			height: 220rpx;
			display: flex;
			justify-content: space-between;

			.kanchang-item {

				width: 327rpx;
				height: 220rpx;

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				background: rgba(0, 0, 0, 1);

				border-radius: 10rpx;

				.size {
					font-size: 70rpx;
				}

				.size-small {
					font-size: 66rpx;
				}

				.kanchang-item-title {
					font-size: 34rpx;
					line-height: 83rpx;
					text-shadow: 0rpx 6rpx 4rpx rgba(0, 0, 0, 0.1);
				}
			}

			.kanchang1 {
				background: url(https://pic.fhshidai.com/fileUy6mewD2R0HZogsQuwoiT6RoNpsfAeH1nA4KOVDT.png) no-repeat;
				background-size: 327rpx 220rpx;
			}

			.kanchang2 {
				background: url(https://pic.fhshidai.com/file6Xzt1OgVDuYpY2InMaBOUQELLmuXLvMiV9p5y2CZ.png) no-repeat;
				background-size: 327rpx 220rpx;
			}
		}
	}
</style>
